// 容器 container 公共样式
%sn-container-before {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-color: #0a6aff;
  border-style: solid;
  border-top-width: 2px;
  border-bottom-width: 0;
}
.sn-container {
  position: absolute;
  width: 500px;
  height: 550px;
  border: 2px solid rgba(92, 255, 255, 0.1);
  background: rgba(10, 106, 255, 0.1) url('../../assets/images/home/wg.png')
    repeat 50% 50% !important;
  background-blend-mode: screen;
  overflow: visible;
  left: 50px;
  top: 110px;
  &:before {
    @extend %sn-container-before;
    left: -2px;
    border-left-width: 2px;
    border-right-width: 0;
  }
  &:after {
    @extend %sn-container-before;
    right: -2px;
    border-left-width: 0;
    border-right-width: 2px;
  }
  // 内容 content 公共样式
  %sn-content-before {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 5px;
    height: 5px;
    border-color: #0a6aff;
    border-style: solid;
    border-top-width: 0;
    border-bottom-width: 2px;
  }
  .sn-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .sn-title {
      position: absolute;
      height: 26px;
      font-size: 16px;
      color: #00c2ff;
      line-height: 26px;
      padding: 0 0 0 20px;
      left: 10px;
      right: 10px;
      top: 10px;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 14px;
        height: 14px;
        background: url('../../assets/images/home/sn-title.png') no-repeat 0% 0%;
      }
    }
    &:before {
      @extend %sn-content-before;
      left: -2px;
      border-left-width: 2px;
      border-right-width: 0;
    }
    &:after {
      @extend %sn-content-before;
      right: -2px;
      border-left-width: 0;
      border-right-width: 2px;
    }
    .sn-body {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
      .pd-main {
        position: absolute;
        height: 100%;
        width: 100%;
        [class^='chart'] {
          position: absolute;
          transform-origin: left top;
        }
        .chart-1 {
          width: 500px;
          height: 410px;
          top: 55%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .compass {
          width: 100%;
          height: 100%;
          transform: scale(0.9);
          [class^='compass-bg-'] {
            position: absolute;
            bottom: 0;
          }
          // 使用transform旋转 制作发光菱形
          %compass-bg {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
          }
          .compass-bg-1 {
            @extend %compass-bg;
            margin-left: -250px;
            bottom: -200px;
            width: 500px;
            height: 500px;
            background: repeating-radial-gradient(
              transparent,
              rgba(0, 138, 174, 0.2)
            );
            display: none;
          }
          .compass-bg-2 {
            @extend %compass-bg;
            margin-left: -220px;
            bottom: -170px;
            width: 440px;
            height: 440px;
            background: -webkit-repeating-radial-gradient(
              transparent,
              rgba(250, 118, 159, 0.2)
            );
            background: -moz-repeating-radial-gradient(
              transparent,
              rgba(250, 118, 159, 0.2)
            );
            background: -o-repeating-radial-gradient(
              transparent,
              rgba(250, 118, 159, 0.2)
            );
            background: repeating-radial-gradient(
              transparent,
              rgba(250, 118, 159, 0.2)
            );
            display: none;
          }
          .compass-bg-3 {
            @extend %compass-bg;
            margin-left: -190px;
            bottom: -140px;
            width: 380px;
            height: 380px;
            background: -webkit-repeating-radial-gradient(
              transparent,
              rgba(10, 58, 103, 0.2)
            );
            background: -moz-repeating-radial-gradient(
              transparent,
              rgba(10, 58, 103, 0.2)
            );
            background: -o-repeating-radial-gradient(
              transparent,
              rgba(10, 58, 103, 0.2)
            );
            background: repeating-radial-gradient(
              transparent,
              rgba(10, 58, 103, 0.2)
            );
          }
          .compass-bg-4 {
            @extend %compass-bg;
            margin-left: -160px;
            bottom: -110px;
            width: 320px;
            height: 320px;
            background: -webkit-repeating-radial-gradient(
              transparent,
              rgba(112, 67, 103, 0.2)
            );
            background: -moz-repeating-radial-gradient(
              transparent,
              rgba(112, 67, 103, 0.2)
            );
            background: -o-repeating-radial-gradient(
              transparent,
              rgba(112, 67, 103, 0.2)
            );
            background: repeating-radial-gradient(
              transparent,
              rgba(112, 67, 103, 0.2)
            );
          }
          .compass-bg-5 {
            @extend %compass-bg;
            margin-left: -130px;
            bottom: -80px;
            width: 260px;
            height: 260px;
            -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
            -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
            box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
          }
          .compass-bg-6 {
            @extend %compass-bg;
            margin-left: -100px;
            bottom: -50px;
            width: 200px;
            height: 200px;
            background: -webkit-repeating-radial-gradient(
              transparent,
              rgba(246, 116, 160, 0.2)
            );
            background: -moz-repeating-radial-gradient(
              transparent,
              rgba(246, 116, 160, 0.2)
            );
            background: -o-repeating-radial-gradient(
              transparent,
              rgba(246, 116, 160, 0.2)
            );
            background: repeating-radial-gradient(
              transparent,
              rgba(246, 116, 160, 0.2)
            );
            display: none;
          }
          .compass-bg-7 {
            @extend %compass-bg;
            margin-left: -70px;
            bottom: -20px;
            width: 140px;
            height: 140px;
            background: -webkit-repeating-radial-gradient(
              transparent,
              rgba(102, 97, 70, 0.2)
            );
            background: -moz-repeating-radial-gradient(
              transparent,
              rgba(102, 97, 70, 0.2)
            );
            background: -o-repeating-radial-gradient(
              transparent,
              rgba(102, 97, 70, 0.2)
            );
            background: repeating-radial-gradient(
              transparent,
              rgba(102, 97, 70, 0.2)
            );
            -webkit-animation: bgshadow 3s linear infinite;
            -moz-animation: bgshadow 3s linear infinite;
            -o-animation: bgshadow 3s linear infinite;
            animation: bgshadow 3s linear infinite;
          }
          // 菱形上用图片 添加灯光效果
          [class^='compass-bg-c'] {
            width: 100%;
            height: 100%;
          }
          .compass-bg-c-1 {
            background: url('../../assets/images/home/chart1/compass-bg-1.png')
              no-repeat 50% 345px;
          }
          .compass-bg-c-2 {
            width: 100%;
            height: 100%;
            background: url('../../assets/images/home/chart1/compass-bg-2.png')
              no-repeat 65% 146px;
            opacity: 0.8;
            animation: fadebg 3s linear infinite;
          }
          .compass-bg-c-3 {
            background: url('../../assets/images/home/chart1/compass-bg-3.png')
              no-repeat 50% 227px;
          }
          .compass-bg-c-4 {
            background: url('../../assets/images/home/chart1/compass-bg-4.png')
              no-repeat 50% 63px;
            animation: numberfade 5s linear infinite;
          }
          // 指南针的文本
          .compass-text {
            position: absolute;
            overflow: hidden;
            left: 50%;
            margin-left: -60px;
            font-size: 12px;
            background-color: rgba(0, 71, 157, 0.4);
            padding: 5px 10px;
            color: #00c2ff;
            border-radius: 6px;
            line-height: 1.5;
            display: none;
            &.compass-text-1 {
              top: -77px;
              left: 48px;
            }
            &.compass-text-2 {
              top: -35px;
              left: 152px;
            }
            &.compass-text-3 {
              top: 5px;
              left: 250px;
            }
            &.compass-text-4 {
              top: 49px;
              left: 350px;
            }
            &.compass-text-5 {
              top: 88px;
              left: 450px;
            }
            &.compass-text-6 {
              color: #d57a31;
              bottom: -945px;
              animation-delay: 25s;
            }
            &.compass-text-7 {
              color: #d57a31;
              bottom: -1150px;
              animation-delay: 30s;
            }
            // 给span 设置margin
            %span-nth-child {
              margin-top: 0px;
            }
            span {
              display: block;
              &:nth-child(1) {
                @extend %span-nth-child;
              }
              &:nth-child(2) {
                @extend %span-nth-child;
              }
              &:nth-child(3) {
                @extend %span-nth-child;
              }
            }
            &.show {
              display: block;
            }
          }
          //
          .compass-number {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            bottom: 50px;
            > .szscale {
              transform: scale(1.2);
              transform-origin: center bottom;
            }
            > div {
              position: absolute;
              bottom: 0;
              width: 55px;
              height: 0;
              animation: sz 1s linear;
              animation-fill-mode: forwards;
              transition: 1s;
              &:nth-child(1) {
                left: 5%;
                color: #ff9232;
                animation-delay: 0s;
                &:after {
                  animation-delay: 0s;
                }
              }
              &:nth-child(2) {
                left: 25%;
                color: #d5c245;
                animation-delay: 0.2s;
                bottom: -10%;
                &:after {
                  animation-delay: 2.85s;
                }
              }
              &:nth-child(3) {
                left: 45%;
                color: #01a455;
                animation-delay: 0.4s;
                bottom: -20%;
                &:after {
                  animation-delay: 5.7s;
                }
              }
              &:nth-child(4) {
                left: 65%;
                color: #85adfb;
                animation-delay: 0.6s;
                bottom: -30%;
                &:after {
                  animation-delay: 8.55s;
                }
              }
              &:nth-child(5) {
                left: 85%;
                color: #c36885;
                animation-delay: 0.8s;
                bottom: -40%;
                &:after {
                  animation-delay: 11.4s;
                }
              }
              &:nth-child(6) {
                left: 75%;
                color: #f674a0;
                animation-delay: 1s;
                bottom: -50%;
                &:after {
                  animation-delay: 14.25s;
                }
              }
              &:nth-child(7) {
                left: 87.5%;
                color: #275fcc;
                animation-delay: 1.2s;
                bottom: -60%;
                &:after {
                  animation-delay: 17.1s;
                }
              }

              span {
                display: block;
                width: 55px;
                height: 55px;
                line-height: 55px;
                text-align: center;
                /*padding-bottom: 55px;*/
                box-shadow: inset 0 0 15px currentColor;
                border-radius: 100%;
              }
              &:before {
                content: '';
                position: absolute;
                height: 100%;
                border-left: 1px dashed currentColor;
                height: 500px;
                top: 55px;
                left: 50%;
                margin-left: -1px;
              }
              &:after {
                content: 'NO.' attr(title);
                position: absolute;
                display: inline-block;
                top: -20px;
                width: 100%;
                font-family: 'DIGITALDREAMFAT';
                text-align: center;
              }
            }
          }
          // 线
          .line-sx {
            .line-fs {
              width: 14px;
              height: 100%;
              background: url('../../assets/images/home/chart1/line-fs.png')
                no-repeat;
              background-position: 50% 150%;
              position: absolute;
              z-index: -1;
              animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
              &:nth-child(2) {
                height: 90%;
                -webkit-animation-duration: 2s;
                -moz-animation-duration: 2s;
                -o-animation-duration: 2s;
                animation-duration: 2s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
                -o-animation-delay: 1.5s;
                animation-delay: 1.5s;
                bottom: 0;
                left: 51px;
              }
              &:nth-child(3) {
                height: 100%;
                -webkit-animation-duration: 3s;
                -moz-animation-duration: 3s;
                -o-animation-duration: 3s;
                animation-duration: 3s;
                -webkit-animation-delay: 0s;
                -moz-animation-delay: 0s;
                -o-animation-delay: 0s;
                animation-delay: 0s;
                bottom: 32px;
                left: 89px;
              }
              &:nth-child(4) {
                height: 100%;
                -webkit-animation-duration: 2.5s;
                -moz-animation-duration: 2.5s;
                -o-animation-duration: 2.5s;
                animation-duration: 2.5s;
                -webkit-animation-delay: 1s;
                -moz-animation-delay: 1s;
                -o-animation-delay: 1s;
                animation-delay: 1s;
                bottom: 3px;
                left: 179px;
                -webkit-filter: hue-rotate(180deg);
                filter: hue-rotate(180deg);
              }
              &:nth-child(5) {
                height: 90%;
                -webkit-animation-duration: 2s;
                -moz-animation-duration: 2s;
                -o-animation-duration: 2s;
                animation-duration: 2s;
                -webkit-animation-delay: 2s;
                -moz-animation-delay: 2s;
                -o-animation-delay: 2s;
                animation-delay: 2s;
                bottom: 42px;
                left: 229px;
              }
              &:nth-child(6) {
                height: 100%;
                -webkit-animation-duration: 2.5s;
                -moz-animation-duration: 2.5s;
                -o-animation-duration: 2.5s;
                animation-duration: 2.5s;
                -webkit-animation-delay: 0.5s;
                -moz-animation-delay: 0.5s;
                -o-animation-delay: 0.5s;
                animation-delay: 0.5s;
                bottom: 11px;
                right: 48px;
              }
              &:nth-child(7) {
                height: 90%;
                -webkit-animation-duration: 3s;
                -moz-animation-duration: 3s;
                -o-animation-duration: 3s;
                animation-duration: 3s;
                -webkit-animation-delay: 2.5s;
                -moz-animation-delay: 2.5s;
                -o-animation-delay: 2.5s;
                animation-delay: 2.5s;
                bottom: -22px;
                right: 174px;
                -webkit-filter: hue-rotate(180deg);
                filter: hue-rotate(180deg);
              }
              &:nth-child(8) {
                height: 90%;
                -webkit-animation-duration: 3s;
                -moz-animation-duration: 3s;
                -o-animation-duration: 3s;
                animation-duration: 3s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
                -o-animation-delay: 1.5s;
                animation-delay: 1.5s;
                bottom: -22px;
                right: 100px;
              }
              &:nth-child(9) {
                height: 100%;
                -webkit-animation-duration: 2.5s;
                -moz-animation-duration: 2.5s;
                -o-animation-duration: 2.5s;
                animation-duration: 2.5s;
                -webkit-animation-delay: 2s;
                -moz-animation-delay: 2s;
                -o-animation-delay: 2s;
                animation-delay: 2s;
                bottom: -10px;
                right: 220px;
              }
              &:nth-child(10) {
                height: 95%;
                -webkit-animation-duration: 2s;
                -moz-animation-duration: 2s;
                -o-animation-duration: 2s;
                animation-duration: 2s;
                -webkit-animation-delay: 1s;
                -moz-animation-delay: 1s;
                -o-animation-delay: 1s;
                animation-delay: 1s;
                bottom: -41px;
                right: 182px;
              }
            }
          }
        }
      }
    }
  }
}
@keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
